/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-23 14:07:48
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {

  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene, camera, renderer) {
    const geometry1 = new THREE.BoxGeometry(50, 5, 5)
    const material1 = new THREE.MeshLambertMaterial({
      color: 0xff0ff0
    })
    const box = new THREE.Mesh(geometry1, material1)
    scene.add(box)

    const geometry2 = new THREE.SphereGeometry(20);
    const material2 = new THREE.MeshLambertMaterial({
      color: 0x00ffff
    })
    const sphere = new THREE.Mesh(geometry2, material2);
    scene.add(sphere)

    box.name = 'Box';

    // 关键
    const times = [0, 3, 6];
    const values = [0, 0, 0, 200, 0, 0, 0, 0, 0]
    const posFK = new THREE.KeyframeTrack('Box.position', times, values)
    const colorFK = new THREE.KeyframeTrack('Box.material.color', [2, 5], [1,0,0,0,0,1]);
    const clip = new THREE.AnimationClip('test', 6, [posFK, colorFK]);
    const mixer = new THREE.AnimationMixer(box);
    const clipAction = mixer.clipAction(clip);
    clipAction.play(); 

    const clock = new THREE.Clock();
    function loop() {
      requestAnimationFrame(loop);
      const frameT = clock.getDelta();
      // 更新播放器相关的时间
      mixer.update(frameT);
    }
    loop();
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}